<template>
  <div id="userProfile">
    <bread-crumb moduleName="系统管理" featureName="用户管理" activityName="个人信息" />
    <Row>
      <Col span="4">
        <div>
          <span class="profile-picture">
            <img class="editable" src="../../assets/profile-pic.jpg"/>
          </span>
        </div>
        <div>
          <span></span>
        </div>
      </Col>
      <Col span="16">
        <div class="profile-info">
          <div class="profile-info-row">
            <div class="profile-info-name">用户名：</div>
            <div class="profile-info-value">{{user.username}}</div>
          </div>
          <div class="profile-info-row">
            <div class="profile-info-name">邮箱：</div>
            <div class="profile-info-value">{{user.email}}</div>
          </div>
          <div class="profile-info-row">
            <div class="profile-info-name">手机号码：</div>
            <div class="profile-info-value">{{user.mobile}}</div>
          </div>
          <div class="profile-info-row">
            <div class="profile-info-name">类型：</div>
            <div class="profile-info-value">{{user.userType}}</div>
          </div>
          <div class="profile-info-row">
            <div class="profile-info-name">当前状态：</div>
            <div class="profile-info-value">{{user.status == 1 ? '激活':'停用'}}</div>
          </div>
        </div>
      </Col>
    </Row>
  </div>
</template>
<script>
  import BreadCrumb from '../Breadcrumb.vue'
  export default {
    components: {BreadCrumb},
    data () {
      return {
        user: {}
      }
    },
    created () {
      this.handleGetUserInfo()
    },
    methods: {
      handleGetUserInfo () {
        this.$http.get('/sys/user/info').then((response) => {
          if (response.data.code === 200) {
            this.isLoginActive = true
            this.user = response.data.user
          }
        }, (response) => {
          console.log(response.msg)
        })
      }
    }
  }
</script>
<style>
  #userProfile {
    margin: 5px 20px;
    backgorund:#fff;
  }

  .profile-picture {
    border: 1px solid #CCC;
    background-color: #FFF;
    padding: 4px;
    display: inline-block;
    max-width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
  }

  .editable {
    border: 1px dotted #BBB;
  }
  img.editable:hover {
    opacity: 0.75;
    filter: alpha(opacity=75);
  }

  .profile-prcture img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px dotted #BBB;
  }
  .profile-info {
    display: table;
    width: calc(100% - 24px);
    margin: 0 auto;
  }
  .profile-info-row {
    display: table-row;
  }
  .profile-info-name {
    text-align: right;
    padding: 6px 10px 6px 4px;
    font-weight: normal;
    color: #667E99;
    background-color: transparent;
    border-top: 1px dotted #D5E4F1;
    display: table-cell;
    width: 110px;
    vertical-align: middle;
  }
  .profile-info-row:first-child .profile-info-name, .profile-info-row:first-child .profile-info-value {
      border-top: none;
  }
  .profile-info-value {
    display: table-cell;
    padding: 6px 4px 6px 6px;
    border-top: 1px dotted #D5E4F1;
  }
</style>
